<!--
 * @Description: 文件描述
 * @Author: 陈三愿
 * @Date: 2025-09-17 00:41:53
 * @LastEditTime: 2025-09-17 00:47:47
-->
<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button shadow>Solid</el-button>
    <el-button type="primary" solid>Primary</el-button>
    <el-button type="success" solid>Success</el-button>
    <el-button type="info" solid>Info</el-button>
    <el-button type="warning" solid>Warning</el-button>
    <el-button type="danger" solid>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button ghost>Ghost</el-button>
    <el-button type="primary" ghost>Primary</el-button>
    <el-button type="success" ghost>Success</el-button>
    <el-button type="info" ghost>Info</el-button>
    <el-button type="warning" ghost>Warning</el-button>
    <el-button type="danger" ghost>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>

  <el-card class="box-card" title="卡片标题">
    <template #extra>
      <el-button class="button" type="text">操作</el-button>
    </template>
    <div v-for="o in 4" :key="o" class="text item">{{ "List item " + o }}</div>
    <template #action>
      <el-button> 操作一 </el-button>
      <el-button> 操作一 </el-button>
      <div style="flex: 1" />
      <el-button type="primary" :icon="Search"> 操作一 </el-button>
    </template>
  </el-card>

  <el-radio-group v-model="size">
    <el-radio label="large">大</el-radio>
    <el-radio>默认</el-radio>
    <el-radio label="small">小</el-radio>
  </el-radio-group>

  <el-descriptions
    class="margin-top"
    title="边框"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <el-button type="primary">操作</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          用户名
        </div>
      </template>
      亚索玛
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          电话
        </div>
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location />
          </el-icon>
          居住地
        </div>
      </template>
      北京
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          备注
        </div>
      </template>
      <el-tag size="small">学生</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building />
          </el-icon>
          详细地址
        </div>
      </template>
      西城区王府井金鱼胡同23号
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions
    class="margin-top"
    title="无边框"
    :column="3"
    :size="size"
    :style="blockMargin"
  >
    <template #extra>
      <el-button type="primary">操作</el-button>
    </template>
    <el-descriptions-item label="用户名">娜美</el-descriptions-item>
    <el-descriptions-item label="电话">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">上海</el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-tag size="small">学生</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="详细地址"
      >上海黄浦区滨江道12号</el-descriptions-item
    >
  </el-descriptions>
  <el-button type="success" :plain="true" @click="open2">成功</el-button>
  <el-button type="warning" :plain="true" @click="open3">警告</el-button>
  <el-button type="info" :plain="true" @click="open1">消息</el-button>
  <el-button type="danger" :plain="true" @click="open4">失败</el-button>
</template>

<script lang="ts" setup>
// import { Search, Star } from "@element-plus/icons-vue";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  User,
  Iphone,
  Location,
  Tickets,
  OfficeBuilding
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref } from "vue";

const size = ref("default");
const iconStyle = { marginRight: "5px" };
const blockMargin = { marginBottom: "20px" };

const open1 = () => {
  ElMessage("这是一段消息.");
};
const open2 = () => {
  ElMessage({
    message: "这是一段成功消息.",
    type: "success",
  });
};
const open3 = () => {
  ElMessage({
    message: "这是一个警告消息.",
    type: "warning",
  });
};
const open4 = () => {
  ElMessage.error("这是一个失败消息.");
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
